@extends('home.auth.base')
@section('scripts')
    <script>
        let app = new Vue({
            el: '#app',
            data: function() {
                var validatePass = (rule, value, callback) => {
                    if (value === '') {
                        callback(new Error('请再次输入新密码'));
                    } else if (value !== this.form.password) {
                        callback(new Error('两次输入密码不一致!'));
                    } else {
                        callback();
                    }
                };
                return {
                    form: {
                        username: '',
                        code: '',
                        password: '',
                        password_confirmation: '',
                        _token:"{{csrf_token()}}"
                    },
                    rules: {
                        username: [{ required: true, message: '请填写手机号', trigger: 'blur'}],
                        code: [{ required: true, message: '请填写验证码', trigger: 'blur'}],
                        password: [{ required: true, message: '请填写新密码', trigger: 'blur'},{ min: 6, message: '密码的长度不能小于6位', trigger: 'blur' }],
                        password_confirmation: [{ validator: validatePass, trigger: 'blur' }],
                    },
                    smsTime: 60,
                    smsSend: 1,
                    smsMsg: '获取短信验证码',
                }
            },
            methods: {
                find() {
                    let that = this;
                    this.$refs['form'].validate((valid) => {
                        if (valid) {
                            $.post("{{ route('home.auth.find') }}",this.form,function(res){
                                if(res.code){
                                    that.$message.error(res.msg);
                                }else{
                                    that.$message({
                                        message: '重置密码成功，页面即将跳转......',
                                        type: 'success'
                                    });
                                    setTimeout(function(){
                                        window.location.href = res.data;
                                    }, 1000);
                                }
                            });
                        }
                    });
                },
                send(){
                    let reg = /^1[3|4|5|7|8][0-9]\d{8}$/;
                    if(!this.form.username){
                        this.$refs.form.fields[0].error = "请填写手机号";return false;
                    }
                    if(!reg.test(this.form.username)){
                        this.$refs.form.fields[0].error = "请输入有效的手机号码";return false;
                    }
                    if(this.smsSend){
                        let that = this;
                        $.post("{{ route('home.auth.sms') }}",{mobile:this.form.username,_token:"{{csrf_token()}}",type:'find'},function(res){
                            if(res.code){
                                that.$message.error(res.msg);
                            }else{
                                that.smsSend = 0;
                                let timer = setInterval(function(){
                                    that.smsMsg = "<em style='font-style: normal;color: red'>"+that.smsTime + "</em> 秒后重新获取";
                                    that.smsTime--;
                                    if (that.smsTime < 1) {
                                        that.smsTime = 60;
                                        that.smsSend = 1;
                                        that.smsMsg = "获取短信验证码";
                                        clearInterval(timer);
                                    }
                                }, 1000);
                            }
                        });
                    }
                }
            }
        });
    </script>
@endsection
@section('content')
    <div class="container main auth">
        <div class="row">
            <div class="col-lg-12 text-center">
                <div class="auth-form" id="app" style="height: 850px;" v-cloak>
                    <div class="auth-login-menu">
                        <img style="width: 224px" src="{{ $setting['pc_logo'] }}" alt="">
                        <ul style="margin-left: 20px">
                            <li class="li-login"><a class="active">找回密码</a></li>
                        </ul>
                    </div>
                    <el-form :model="form" :rules="rules" ref="form" status-icon label-position="top" class="login-form">
                        <el-form-item label="手机号：" prop="username">
                            <el-input  v-model="form.username" clearable placeholder="请填写手机号" auto-complete="off"></el-input>
                        </el-form-item>
                        <el-form-item label="验证码：" prop="code">
                            <el-input placeholder="请填写验证码" clearable v-model="form.code">
                                <template slot="append">
                                    <span @click="send()" style="width: 100px;display: inline-block;text-align: center;cursor: pointer" v-html="smsMsg"></span>
                                </template>
                            </el-input>
                        </el-form-item>
                        <el-form-item label="新密码：" prop="password">
                            <el-input type="password" clearable v-model="form.password" placeholder="请填写新密码" auto-complete="off"></el-input>
                        </el-form-item>
                        <el-form-item required label="确认密码：" prop="password_confirmation">
                            <el-input type="password" clearable v-model="form.password_confirmation" placeholder="请再次输入新密码" auto-complete="off"></el-input>
                        </el-form-item>
                        <div class="form-submit">
                            <el-button type="primary" @click="find()">提 交</el-button>
                        </div>
                    </el-form>
                </div>
            </div>
        </div>
    </div>
@endsection

